<template>
  <a-modal
    title="操作日志"
    width="80vw"
    :visible="visible"
    @ok="handleCancel"
    @cancel="handleCancel"
    cancelText="关闭"
    :ok-button-props="{ style: { display: 'none' } }"
  >
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="loadList(1)">
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-item>
              <a-input placeholder="操作人名称" v-model="ipagination.createUserName" allowClear @change="loadList(1)"></a-input>
              <!-- <j-input placeholder="操作人名称" v-model="ipagination.createUserName" allowClear @change="loadList(1)"></j-input> -->
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item>
              <a-select v-model="ipagination.operateType" placeholder="请选择操作类型"   @change="loadList(1)">
                <a-select-option
                  v-for="option in operateTypeOptions"
                  :key="option.value"
                  :value="option.value"
                  :allowClear="true"
                >{{ option.label }}</a-select-option
                >
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item>
              <a-date-picker v-model="ipagination.createTime" placeholder="请选择操作日期" valueFormat="YYYY-MM-DD"  @change="loadList(1)"/>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item>
              <a-button icon="query" @click="loadList(1)">查询</a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <div>
      <a-table
        ref="table"
        size="middle"
        bordered
        row-key="id"
        :columns="columns"
        :data-source="tableData"
        :pagination="ipagination"
        :loading="loading"
        class="j-table-force-nowrap"
        @change="handleTableChange"
      />
    </div>
  </a-modal>
</template>

<script>

import LibLog from '../components/LibLog'
import { getAction } from '@/api/manage'
import JInput from '@/components/jeecg/JInput'
const defaultOperateTypeOptions =  [
        { value: 1, label: '签收' },
        { value: 2, label: '下载' },
        { value: 3, label: '收藏' },
        { value: 5, label: '查阅' },
      ]
export default {
  name: 'IndexLibLogModal',
  components: {
    LibLog,JInput
  },
  props:{
    otherOperateType:{  
      required:false,
      type:Array,  
      default:()=>{return []}
    }
  },
  data() {
    return {
      title: '操作',
      visible: false,
      operateTypeOptions: [...defaultOperateTypeOptions,...this.otherOperateType],

      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '操作人 ',
          align: 'center',
          dataIndex: 'createUserName',
        },

        {
          title: '操作日期',
          align: 'center',
          dataIndex: 'createTime',
        },
        {
          title: '操作类型',
          align: 'center',
          dataIndex: 'operateType',
          customRender: (text) => {
            if (text == 1) {
              return '签收'
            } else if (text == 2) {
              return '下载'
            } else if (text == 3) {
              return '收藏'
            } else if (text == 4) {
              return '利用'
            } else if (text == 5) {
              return '查阅'
            }else {
              return text
            }
          },
        },
        {
          title: '签收单号',
          align: 'center',
          dataIndex: 'signNo',
        },
        {
          title: '客户端地址',
          align: 'center',
          dataIndex: 'ip',
        }
      ],
      tableData: [],
      /* 分页参数 */
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
        name: '',
      },
      loading: false,
      url: {
        list: '/lib/hteLibLog/list',
      },
      fileId: 0,
    }
  },
  methods: {
    showLog(type,fileId) {
      this.visible = true
      this.fileId=fileId
      this.ipagination.current = 1;
      this.ipagination.pageNo = 1;
      this.ipagination.pageSize = 10,
      this.$set(this.ipagination,'operateType',type)
      this.loadList()
    },
    handleCancel() {
      this.visible = false
    },
    handleOk() {
      this.close()
    },
    loadList(pageNo) {
      if(!!pageNo){
          this.ipagination.current = pageNo;
         this.ipagination.pageNo = pageNo;
      }
      this.ipagination.fileId = this.fileId
      let param = Object.assign({}, this.ipagination)
      delete param.pageSizeOptions
      delete param.showTotal
      getAction(this.url.list, param).then((res) => {
        if (res.success) {
          if (res.result.total) {
            this.ipagination.total = res.result.total
          } else {
            this.ipagination.total = 0
          }
          this.tableData = res.result.records
        } else {
          this.$message.error(res.message)
        }
      })
    },
    handleTableChange(pagination, filters, sorter) {
      this.ipagination = pagination
      this.ipagination.pageNo = this.ipagination.current
      this.loadList()
    },
  }
}
</script>

<style lang="less" scoped>
/** Button按钮间距 */
  .ant-btn {
    margin-left: 30px;
    margin-bottom: 30px;
    float: right;
  }
  .drawer-footer{
    position: absolute;
    bottom: -8px;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }
</style>
